<template>
    <div class="news-marketing">
        <header>
            <span></span>
            <h2>新闻营销案例</h2>
        </header>
        <div class="center">
            <div class="image">
                <img src="../../../assets/img/douyu.png" alt="">
            </div>
            <div class="text">
                <div class="advertisers">
                    <div class="subtitle">
                        <span></span>
                        <strong>广告主</strong>
                    </div>
                    <p>斗鱼</p>
                </div>
                <div class="time">
                    <div class="subtitle">
                        <span></span>
                        <strong>实施时间</strong>
                    </div>
                    <p>2015年12月至今</p>
                </div>
                <div class="range">
                    <div class="subtitle">
                        <span></span>
                        <strong>实施范围</strong>
                    </div>
                    <p>全国</p>
                </div>
            </div>
        </div>
        <div class="service-items">
            <div class="subtitle">
                <span></span>
                <strong>服务项目</strong>
            </div>
            <p>新闻发布 - 新闻每日持续发布至搜狐娱乐、人民网娱乐、光明网娱乐、 千龙网娱乐、扬子晚报网、东方娱乐网、中国网新闻、中国日报网等一二线娱乐媒体</p>
        </div>
        <div class="effectiveness-analysis">
            <div class="subtitle">
                <span></span>
                <strong>效果分析</strong>
            </div>
            <p>新闻成功获得《今日头条》科技频道首页推荐</p>
        </div>
    </div>
</template>
<script>
export default {
    name: 'NewsMarketing',
    data () {
        return {

        }
    }
}
</script>
<style scoped>
.news-marketing {
    margin-top: 100px;
}
.news-marketing header {
    text-align: center;
}
.news-marketing header span {
    display: inline-block;
    width: 55px;
    height: 39px;
    background: url("../../../assets/img/down.png") no-repeat;
    background-size: cover;
}
.news-marketing header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top: 20px;
}
.news-marketing .center {
    display: flex;
    width: 670px;
    margin: 80px auto 0;
}
.news-marketing .center .image {
    height: 575px;
    width: 389px;
}
.news-marketing .center .image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.news-marketing .center .text {
    margin-top: 28px;
    margin-left: 60px;
}
.news-marketing .center .advertisers,.news-marketing .center .time,.news-marketing .center .range {
    display: flex;
    flex-direction: column;
}
.news-marketing .center .time,.news-marketing .center .range {
    margin-top: 60px;
}
.news-marketing .center .advertisers .subtitle,.news-marketing .center .time .subtitle,.news-marketing .center .range .subtitle {
    display: flex;
}
.news-marketing .center .advertisers .subtitle span,.news-marketing .center .time .subtitle span,.news-marketing .center .range .subtitle span {
    width: 6px;
    height: 30px;
    display: inline-block;
    background-color: #1e90ff;
}
.news-marketing .center .advertisers .subtitle strong,.news-marketing .center .time strong,.news-marketing .center .range .subtitle strong {
    font-size: 36px; /*px*/
    color: #05173b;
    margin-left: 12px;
}
.news-marketing .center .advertisers p,.news-marketing .center .time p,.news-marketing .center .range p {
    font-size: 30px; /*px*/
    color: #708090;
    margin-top: 20px;
    margin-left: 18px;
    line-height: 40px;
    display: inline-block;
    width: 263px;
}
.news-marketing .service-items,.news-marketing .effectiveness-analysis {
    width:670px;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}
.news-marketing .service-items .subtitle,.news-marketing .effectiveness-analysis .subtitle {
    display: flex;
}
.news-marketing .service-items .subtitle span,.news-marketing .effectiveness-analysis .subtitle span {
    width: 6px;
    height: 30px;
    display: inline-block;
    background-color: #1e90ff;
}
.news-marketing .service-items .subtitle strong,.news-marketing .effectiveness-analysis .subtitle strong {
    font-size: 36px; /*px*/
    color: #05173b;
    margin-left: 12px;
}
.news-marketing .service-items p,.news-marketing .effectiveness-analysis p {
    font-size: 30px; /*px*/
    color: #708090;
    margin-top: 40px;
    margin-left: 18px;
    line-height: 40px;
    display: inline-block;
}
</style>